<template>
  <el-dialog
    title="评价列表"
    :close-on-click-modal="false"
    :visible.sync="coursewareVisible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="70%"
    v-loading="loading"
    append-to-body
  >
    <div class="JADP-common-layout-center">
      <el-row class="JADP-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="评分方式">
              <el-select v-model="query.method" @change="changeMethod">
                <el-option label="分值" value="1"></el-option>
                <el-option label="自定义" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JADP-common-layout-main JADP-flex-main">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          border
          @selection-change="handleSelectionChange"
          row-key="id"
          max-height="500"
        >
          <el-table-column type="selection" width="55" reserve-selection />
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="categore" label="评价分类" align="left">
            <template v-slot="{ row }">
              {{ getDict("pingjiafenlei", row.categore) }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="content" label="评价名称" align="left" />
          <el-table-column prop="releasestatus" label="发布状态" align="left">
            <template v-slot="{ row }">
              {{ row.releasestatus == 1 ? "已发布" : "未发布" }}
            </template>
          </el-table-column> -->
          <el-table-column
            prop="content"
            label="评价内容"
            align="left"
            show-overflow-tooltip
          />
          <el-table-column prop="method" label="评分方式" align="left">
            <template v-slot="{ row }">
              {{ row.method == 1 ? "分值" : "自定义" }}
            </template>
          </el-table-column>
          <el-table-column prop="creatoruserid" label="创建用户" align="left" />
          <el-table-column prop="creatortime" label="创建时间" align="left" />
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="coursewareVisible = false">取 消</el-button>
      <el-button type="primary" @click="determine">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "",
  data() {
    return {
      coursewareVisible: false,
      loading: false,
      listLoading: false,
      list: [],
      multipleSelection: [],
      query: {
        method: "1",
        organizeId: "",
      },
      evaluateArr: "",
      SelectedCollection: [],
    };
  },
  methods: {
    changeMethod() {
      this.initData();
    },

    // 确定
    determine() {
      this.$emit("determine", this.multipleSelection);
      this.coursewareVisible = false;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    initData() {
      this.coursewareVisible = true;
      this.listLoading = true;
      this.query.organizeId = this.$store.getters.organizeId;

      request({
        url: `/api/xy_pj_manage/Xy_pj_manage/getListNotPage`,
        method: "get",
        data: this.query,
      }).then((res) => {
        this.list = res.data;
        this.listLoading = false;
        this.switchingState();
      });
    },
    switchingState() {
      if (!this.evaluateArr) return;
      this.$refs.multipleTable.clearSelection();
      let newArr = this.evaluateArr.split(",");
      let multipleSelection = this.list.filter((item) =>
        newArr.some((row) => row == item.id)
      );
      this.$nextTick(() => {
        multipleSelection.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
